<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <title>Layui树形表格3.x演示</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="{% static '/lib/fonts/iconfont.css' %}">
    <link rel="stylesheet" href="/static/css/oksub.css">
	<link rel="stylesheet" href="/static/lib/layui/css/global.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
</head>
<body class="ok-body-scroll">
    {% csrf_token %}
    <blockquote class="layui-elem-quote">系统管理>后台设置>菜单管理</blockquote>
    <div class="ok-body">
	<div class="layui-row">
		<div class="layui-col-md12">
			<table class="layui-hide" id="demoTreeTb" lay-filter="tableFilter"></table>
		</div>
	</div>
</div>


<!--增加-->

<script src="/static/lib/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/lib/layui/lay/modules/'
    }).use(['layer', 'util','okLayer','treeTable', 'okUtils'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var okLayer = layui.okLayer;
        var util = layui.util;
        let okUtils = layui.okUtils;
        var treeTable = layui.treeTable;
        okLoading.close();
        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: '/system/getMenuData/',
            toolbar: '#toolbarTpl',
            height: 'full-110',
            tree: {
                iconIndex: 1,
                isPidData: true,
                idName: 'id',
                pidName: 'parent',
                arrowType: 'arrow2',
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {field: 'id', title: 'id', minWidth: 65},
                    {field: 'title', title: '菜单名称', minWidth: 135},
                    {field: 'path', title: '菜单指向', minWidth: 165},
                    {field: 'key', title: '菜单key', minWidth: 165},
                    {field: 'icon',class:'ok-icon', title: '图标类型', minWidth: 85},
                    {field: 'sort', title: '菜单排序', minWidth: 65},
                    {field: 'menu_pid', title: '上级菜单ID', minWidth: 65, hide:true},
                    {field: 'menu_type', title: '菜单类型',templet: "#maritalTpl", minWidth: 100},
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 165}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            let data=obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
					break;
                case "del":
                    del(data);
                    break;
            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(demoTreeTb)', function (obj) {
            switch (obj.event) {
                case 'add':
                    add();
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
            }
        });
        // 添加事件
        function add() {
			okLayer.open("添加菜单", "{% url 'system:menuAddPage' %}", "90%", "90%", null, function () {
			    insTb.reload();
			})
		}
        // 修改事件
        function edit(data) {
			okLayer.open("修改菜单", "{% url 'system:menuEditPage' %}", "90%", "90%", function (layero,index) {
			    let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			}, function () {
				insTb.reload();
			})
		}
		function del(data) {
            let askMsg = "删除？删除后不可恢复！！！"
			// data['csrfmiddlewaretoken']=$("[name='csrfmiddlewaretoken']").val();
            okLayer.confirm(askMsg,function () {
                okUtils.ajax("/system/delMenuData/"+data.id,"get",null, true).done(function (response) {
                    okUtils.tableSuccessMsg(response.msg);
                     insTb.reload();
                }).fail(function (error) {
                    // 这里已经有提示了
                    console.log(error);
                });
            });
        }

        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });
    });
</script>
<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    {% for k in operaPermisson %}
		{% if k == 'edit' %}    
            <a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">修改</button></a>
        {% elif k == 'delete' %}
            <a href="javascript:" title="删除" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></a>
        {% endif %}
        {% empty %}
			<span>无权限</span>
        {% endfor %}
</script>
<!--增加-->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
        {% for i in headPermisson %}
			{% if i == 'add' %}  
		    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加菜单</button>
            {% endif %}
        {% endfor %}
        <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>
<!--菜单类型-->
<script type="text/html" id="maritalTpl">
    {% verbatim %}
	{{#  if(d.menu_type == 0){ }}
	<span class="layui-btn-primary layui-btn-xs">目录</span>
	{{#  } else if(d.menu_type == 1) { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">菜单</span>
    {{#  } else if(d.menu_type == 2) { }}
	<span class="layui-btn layui-btn-warm layui-btn-xs">按钮</span>
	{{#  } }}
	{% endverbatim %}
</script>
</body>
</html>